<template>
  <div class="receive-page">
    <div class="title">收文列表</div>
    <el-table
      :data="receivePagerList"
      size="small"
      stripe
      style="width: 100%; margin: 0 10px;"
      v-loading="listLoading"
    >
      <el-table-column
        type="index"
        label="序号"
        width="55"
      ></el-table-column>
      <el-table-column
        label="任务名称"
        min-width="280"
        align="left"
      >
        <template slot-scope="{row}">
          <div
            class="task-name"
            @click="linkToReceivePager(row)"
          >
            <span class="subTask">{{ row.variables.bussName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="发起人"
        min-width="100"
        align="left"
      >
        <template slot-scope="{row}">
          <span class="subTask">{{ row.variables.startUserName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="variables.classify_name"
        label="上报类型"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="紧急程度"
        min-width="100"
      >
        <template slot-scope="{row}">
          <el-tag :type="row.variables.emergency | tagType">
            {{ row.variables.emergency }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="截止日期"
        min-width="120"
      >
        <template slot-scope="{row}">
          <span>{{ parseTime(row.variables.end_time, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      class="pageWrapper"
      v-show="total>0"
      :total="total"
      :layout="'total, prev, pager, next'"
      :page.sync="page"
      :limit.sync="pageSize"
      @pagination="handlePage"
    />
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getCandite } from "@/api/workflow.js";
import { parseTime } from "@/utils";
export default {
  name: "ReceivePageList",
  components: {
    Pagination: require("@/components/Pagination").default
  },
  data() {
    return {
      listLoading: false,
      receivePagerList: [],
      pageSize: 10,
      page: 1,
      total: 0
    };
  },
  computed: {
    ...mapGetters(["id"])
  },
  mounted() {
    this.requestReceivePageList();
  },
  methods: {
    parseTime,
    linkToReceivePager(item) {
      const { variables, procInstId, procDefId, id } = item;
      const { businessKey, rejectElemKey } = variables;
      this.$router.push({
        name: "HandlerPager",
        params: {
          type: "recevie",
          id: id,
          proDefId: procDefId,
          proInsId: procInstId,
          targetId: businessKey,
          variables: variables
        }
      });
    },
    linkUrl(row) {
      let url = this.isHand ? "" : "?processId=" + row.id;
      return "/task-center/report/" + row.variables.bussinesskey + url;
    },
    // 分页
    handlePage(val) {
      this.$emit("handPage", this.isHand, val.page);
    },
    async requestReceivePageList() {
      const {
        data: { data }
      } = await getCandite(this.id);
      this.receivePagerList = data;
      this.total = data.length;
    }
  }
};
</script>
<style lang="scss">
.receive-page {
  padding: 20px;

  .title {
    margin: 12px 12px 4px;
  }

  .task-name {
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
  }
  .overdue-text {
    font-size: 12px;
    color: #fff;
    background: #ff6060;
    border-radius: 4px;
    padding: 1px 3px;
    margin-left: 2px;
  }

  .no-pub {
    background: #a1cfff;
  }
}
</style>
<style>
</style>
